<template>
	<view>
		<u-navbar placeholder fixed autoBack bgColor="#21A5F3" leftIconColor="#fff">
			<view slot="center" style="font-size: 16px;color: #FFFFFF;">考勤功能</view>
			<view slot="right" @click="search"><u--image width="42rpx" height="42rpx" src="/static/icon/icon-18.png"></u--image></view>
		</u-navbar>

		<view class="d-p-30" v-if="info">
			<view><text class="d-font-36" style="font-weight: bold;">班组信息</text></view>
			<view class="card d-p-30 d-m-t-30">
				<view class="d-flex" style="color: #5D6672;">
					<view class="d-flex-1 d-font-24 d-flex">
						<text style="">班组长</text>
						<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;font-weight: bold;">{{ info.data.bzzxm }}</text>
					</view>
					<view class="d-flex-1 d-font-24">
						<text style="">班组人数</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ info.data.member }}人</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-flex-1 d-font-24">
						<text style="">男性人数</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ info.data.man }}人</text>
					</view>
					<view class="d-flex-1 d-font-24">
						<text style="">女性人数</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ info.data.woman }}人</text>
					</view>
				</view>
			</view>

			<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">应用功能</text></view>
			<view class="d-flex d-m-t-32">
				<!-- 这里两个图 -->
				<view class="d-flex-1" @click="signCard()"><u--image src="/static/image/kaoqing.png" width="330rpx" height="130rpx" radius="10rpx"></u--image></view>
				<!-- <view class="d-flex-1 d-m-l-30" @click="makeCard()"><u--image src="/static/image/buka.png" width="330rpx" height="130rpx" radius="10rpx"></u--image></view> -->
			</view>

			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex">
					<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">考勤汇总</view>
					<view @click="show.showDate = true" class="d-font-24 d-flex d-row-center d-col-center" style="color: #505355;">
						<text class="d-m-r-20">{{ form.nowDate }}</text>
						<u-icon style="position: relative;top: 4rpx;" name="arrow-down" size="24rpx" color="#DFDFDF"></u-icon>
					</view>
				</view>

				<view class="d-flex d-text-center d-m-t-30">
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">进场人数</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ atd ? atd.istaffs : 0 }}</text>
							<text class="d-font-20">人</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">考勤人数</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ atd ? atd.atdStaffs : 0 }}</text>
							<text class="d-font-20">人</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">缺勤人数</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ atd ? atd.unatdStaffs : 0 }}</text>
							<text class="d-font-20">人</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<!-- todo 接口没有实名制人数 -->
						<text class="d-font-24" style="color: #4E5C70;">实名制人数</text>
						<!-- <text class="d-font-24" style="color: #4E5C70;">总人数</text> -->
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ atd ? atd.staffs : 0 }}</text>
							<text class="d-font-20">人</text>
						</view>
					</view>
				</view>
				<!-- <view class="d-flex d-row-right d-m-t-20" @click="signCard">
					<view class="d-font-24 d-flex" style="color: #ADB4BD;">
						详情
						<u-icon name="arrow-right" size="24rpx" color="#ADB4BD"></u-icon>
					</view>
				</view> -->
			</view>

			<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">人员列表</text></view>
			<template v-if="list && list.length > 0">
				<view class="d-m-t-30" v-for="(item, index) in list" :key="index">
					<view class="d-m-b-30 card d-p-30" @click="signCard(item)">
						<view class="d-flex">
							<view class="d-font-28 u-line-1" style="font-weight: bold;color: #151C24;max-width: 280rpx;">{{ item.xm }}</view>
							<view class="d-font-28 d-m-l-70" style="color: #5D6672;">{{ item.xb }}</view>
							<view class="d-m-l-20 d-m-r-20"><u-line direction="col" length="36rpx" color="#DFDFDF"></u-line></view>
							<view class="tag d-flex">{{ item.smrz }}</view>
							<view class="d-m-l-20 d-m-r-20"><u-line direction="col" length="36rpx" color="#DFDFDF"></u-line></view>
							<view class="d-font-28" style="color: #21A5F3;">{{ item.ryzt }}</view>
						</view>
						<view class="d-flex d-font-24 d-m-t-20">
							<view class="d-flex" style="flex: 3;">
								<view class="d-m-r-20" style="color: #5D6672;">证件号码</view>
								<view style="color: #162233;">{{ item.zjhm | str }}</view>
							</view>
							<view class="d-flex" style="flex: 2;">
								<view class="d-m-r-20" style="color: #5D6672;">所属区划</view>
								<view style="color: #162233;">{{ item.districtName }}</view>
							</view>
						</view>
						<view class="d-flex d-font-24 d-m-t-20">
							<view class="d-flex" style="flex: 3;">
								<view class="d-m-r-20" style="color: #5D6672;">项目名称</view>
								<view class="d-flex-1 u-line-1" style="color: #162233;">{{ item.gcmc }}</view>
							</view>
						</view>
						<view class="d-flex d-font-24 d-m-t-20">
							<view class="d-flex" style="flex: 3;">
								<view class="d-m-r-20" style="color: #5D6672;">班组名称</view>
								<view style="color: #162233;">{{ item.bzmc }}</view>
							</view>
							<view class="d-flex" style="flex: 2;">
								<view class="d-m-r-20" style="color: #5D6672;">从事工种</view>
								<view style="color: #162233;">{{ item.zwzc }}</view>
							</view>
						</view>
						<view class="d-flex d-font-24 d-m-t-20">
							<view class="d-flex" style="flex: 3;">
								<view class="d-m-r-20" style="color: #5D6672;">本月工资</view>
								<view style="color: #ADB4BD;">{{ item.salary }}</view>
							</view>
							<view class="d-flex" style="flex: 2;">
								<view class="d-m-r-20" style="color: #5D6672;">当天考勤</view>
								<view style="color: #ADB4BD;">{{ item.attendance }}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view style="padding: 10vh;"><u-empty icon="/static/image/none.png" text="暂无数据"></u-empty></view>
			</template>
		</view>
		<u-datetime-picker mode="year-month" :show="show.showDate" @cancel="show.showDate = false" @confirm="e => (show.showDate = false)"></u-datetime-picker>
	</view>
</template>

<script>
import { cpgGo, getWork, getStaff } from '../../../common/api.js';
export default {
	data() {
		return {
			info: null,
			atd: null, // 今日考勤
			show: {
				showDate: false
			},
			form: {
				time: null,
				nowDate: null
			},
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: []
		};
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getStaff().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	onLoad() {
		this.form.time = new Date().getTime();
		this.form.nowDate = uni.$u.timeFormat(this.form.time, 'yyyy-mm-dd');
		this.init();
	},
	methods: {
		init() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			cpgGo({
				params: {
					bzid: this.$user.ssgcxx[this.$appIndex].bzid
				}
			})
				.then(e => {
					this.info = e.data;
					this.getWork(); // 今日考勤
				})
				.then(() => {
					this.pageNum = 1;
					this.list = [];
					this.getStaff().then(e => {
						this.list = e.data;
						this.pageLast = Math.ceil(e.total / this.pageSize);
						uni.hideLoading();
					});
				});
		},
		getStaff() {
			return getStaff({
				params: {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
					rybh: this.$user.ssgcxx[this.$appIndex].rybh // 人员id
				}
			});
		},
		getWork() {
			// 今日考勤
			getWork({
				params: {
					bzid: this.$user.ssgcxx[this.$appIndex].bzid,
					date: this.form.nowDate
				}
			}).then(e => {
				this.atd = e.data;
			});
		},
		signCard(item) {
			if (!item) {
				item = {};
			}
			uni.$u.route({
				url: '/pages/index/work/signCard',
				params: {
					...item
				}
			});
		},
		makeCard() {
			if (!this.list || this.list.length <= 0) {
				return uni.$u.toast('暂无可补卡人员');
			}
			uni.$u.route({
				url: '/pages/index/work/makeCard',
				params: {
					...this.list[0]
				}
			});
		},
		search() {
			uni.$u.route({ url: '/pages/index/work/search' });
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;

		.sub-title {
			position: relative;
			padding-left: 20rpx;
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 22rpx;
				background: #13a4fe;
				border-radius: 4rpx;
				bottom: 0;
				margin: auto;
			}
		}

		.tag {
			height: 32rpx;
			background: #ffb61d;
			border-radius: 4rpx;
			color: #ffffff;
			font-size: 20rpx;
			padding: 0 10rpx;
		}
	}
}
</style>
